<template>
  <div
    class="app-container flex flex-sub"
    style="background: none; height: 100%; padding: 1rem"
  >
    <el-card shadow="never" class="box-card flex-sub">
      <div>
        <el-form
          ref="form"
          size="small"
          :model="formData"
          label-position="right"
          label-width="100px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item :label="'设备编码'" prop="deviceSource">
                <el-input
                  v-model="formData.deviceSource"
                  placeholder="请输入设备编码"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row style="margin-top: 30px">
          <el-col :span="8" style="text-align: center">
            <el-button
              type="primary"
              :loading="submitLoading"
              @click="submit"
              style="width: 120px"
              >确定</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
  <!-- 手动报警 -->
</template>

<script>
export default {
  name: 'manualWarning',
  data() {
    return {
      formData: {
        deviceSource: '',
      },
      rules: {
        deviceSource: {
          required: true,
          message: '设备编码不能为空',
          trigger: 'blur',
        },
      },
      submitLoading: false,
    }
  },
  methods: {
    submit() {
      if (this.formData.deviceSource == '') {
        this.$message({
          message: '设备编码不能为空！',
          type: 'warning',
          duration: 4000,
        })
        return
      }

      this.submitLoading = true
      this.$post('alert/alert/fireHostAlarmManualTest', {
        collectCode: this.formData.deviceSource,
      }).then((e) => {
        this.$store.commit('global/setWarningDialog', e.data)
        this.submitLoading = false
        this.$message({
          message: '手动报警成功！',
          type: 'success',
        })
        this.formData.deviceSource = ''
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '../../../../styles/part-custom';
</style>